﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      html {
        height: 100%;
        min-height: 100%;
        overflow: hidden;
        user-select: none;
        -webkit-app-region: no-drag;
      }
      html body {
        background-size: 163px;
        font: 14px/21px Monaco, sans-serif;
        -webkit-font-smoothing: antialiased;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
        height: 100%;
        min-height: 100%;
        margin: 0px;
        border-radius: 50%;
      }

      html body h4 {
        margin: 0;
      }
      .scene {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
        position: relative;
        border-radius: 50%;
        overflow: hidden;
      }

      .loader {
        position: relative;
        width: 200px;
        height: 200px;
        background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
        border-radius: 50%;
        animation: spin 500ms linear infinite;
      }

      span {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        background: inherit;
      }

      span:nth-child(1) {
        filter: blur(5px);
      }

      span:nth-child(2) {
        filter: blur(10px);
      }

      span:nth-child(3) {
        filter: blur(25px);
      }

      span:nth-child(4) {
        filter: blur(50px);
      }

      span::after {
        position: absolute;
        content: "";
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        background-image: linear-gradient(
          to top,
          #fcc5e4 0%,
          #fda34b 15%,
          #ff7882 35%,
          #c8699e 52%,
          #7046aa 71%,
          #0c1db8 87%,
          #020f75 100%
        );
        border-radius: inherit;
        opacity: 0;
        animation: breath 300ms ease-in-out infinite;
      }

      .text {
        position: absolute;
        opacity: 0;
        animation: breath 1s ease-in-out infinite;
        font-size: 24px;
        font-weight: 700;
        color: #ececec;
        text-shadow: 1px 5px 10px #fff;
      }

      @keyframes breath {
        from {
          opacity: 0.05;
        }

        50% {
          opacity: 1;
        }

        to {
          opacity: 0.05;
        }
      }

      @keyframes spin {
        to {
          transform: rotate(1turn);
        }
      }
    </style>
  </head>

  <body>
    <div class="scene">
      <div class="loader">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="text">RiderWar</div>
    </div>
  </body>
</html>
